import React,{ useEffect, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { View, Image, Button } from '@tarojs/components'
import "taro-ui/dist/style/components/icon.scss";
import './index.less'

export default function Information() {
  const [info,setInfo] = useState({})
  const [ossData,setOssData] = useState(null)
  useEffect(()=>{
    Taro.$get('/common/external/aliyun/getToken').then(res=>{
      setOssData(res.content)
    })
  },[])
  useDidShow(()=>{
    setInfo(Taro.getStorageSync('user') || {})
  })
  const getChooseAvatar = (e) => {
    const relaUrl = ossData.dir+parseInt(Date.parse(new Date()) + Math.random() * 100000) + '.jpg'
    Taro.uploadFile({
      url: ossData.host, //仅为示例，非真实的接口地址
      filePath: e.detail.avatarUrl,
      name: 'file',
      formData: {
        key: relaUrl,
        OSSAccessKeyId: ossData.accessid,
        policy: ossData.policy,
        Signature: ossData.signature,
      },
      header: {
        sassAppId:Taro.$sassAppId,
        token: Taro.getStorageSync('token'),
        channel:Taro.$channel,
      },
      success: (uploadFileRes) => {
        setInfo({...info,avatar:ossData.host + '/' + relaUrl})
        Taro.$put('/mb/users',{
          "avatar": ossData.host + '/' + relaUrl,
        },1)
        Taro.setStorageSync('user',{
          ...Taro.getStorageSync('user'),
          avatar:ossData.host + '/' + relaUrl
        })
      },
      fail: (res) => {
        Taro.$toast('上传失败')
      }
    })
  }
  
  const handleChange = (e) => {  ///  点击个人资料
    Taro.navigateTo({
      url:'/mineSubPack/mine-setting/index?type='+e
    })
  }
  
  const handleGetOut = () => {  // 点击退出登录
    if(Taro.getStorageSync('userSource') === 'USER'){
      Taro.removeStorageSync('openID')
      Taro.removeStorageSync('userSource')
      Taro.removeStorageSync('token')
      Taro.removeStorageSync('user')
      Taro.reLaunch({
        url:'/pages/other/login/index'
      })
    }
  }
  const handleChoiseImg = () => { ///  选择图片
    Taro.chooseImage({
      count: 1, //默认9
      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album'], //从相册选择
      success: (res) => {
        const relaUrl = ossData.dir+parseInt(Date.parse(new Date()) + Math.random() * 100000) + '.jpg'
        Taro.uploadFile({
          url: ossData.host, //仅为示例，非真实的接口地址
          filePath: res.tempFilePaths[0],
          name: 'file',
          withCredentials: false,
          formData: {
            key: relaUrl,
            OSSAccessKeyId: ossData.accessid,
            policy: ossData.policy,
            Signature: ossData.signature,
          },
          header: {
            sassAppId:Taro.$sassAppId,
            token: Taro.getStorageSync('token'),
            channel:Taro.$channel,
          },
          success: (uploadFileRes) => {
            setInfo({...info,avatar:ossData.host + '/' + relaUrl})
            Taro.$put('/mb/users',{
              "avatar": ossData.host + '/' + relaUrl,
            },1)
            Taro.setStorageSync('user',{
              ...Taro.getStorageSync('user'),
              avatar:ossData.host + '/' + relaUrl
            })
          },
          fail: (res) => {
            Taro.$toast('上传失败')
          }
        })
      }
    });
  }
  return (
    <View className="information">
      <View className="mine-header">
        <View className="header-title">
          <View className='h2'>{info.nickName}</View>
          <View className='p'>添加个人简介,让大家更懂你~</View>
        </View>
        {process.env.TARO_ENV != 'h5'?
        <View className="header-img">
          <Button className="button" type="primary" open-type="chooseAvatar" onChooseavatar={getChooseAvatar} ></Button>
          <Image className="img-pic" src={info.avatar}></Image>
          <View className="img-edit"> <View className='at-icon at-icon-camera' style={{color:'#fff'}}></View> </View>
        </View>:
        <View className="header-img" onClick={handleChoiseImg}>
          <Image className="img-pic" src={info.avatar}></Image>
          <View className="img-edit"> <View className='at-icon at-icon-camera' style={{color:'#fff'}}></View> </View>
        </View>}
      </View>
      <View className="mine-list">
        <View className="list-item" onClick={()=>{handleChange('person')}}>
          <Image src={require('@/images/my_info.png')} mode="widthFix"></Image>
          <View className='h3'>个人资料</View>
          <View className="at-icon at-icon-chevron-right"></View>
        </View>
        <View className="list-item" onClick={()=>{handleChange('safe')}}>
          <Image src={require('@/images/my_pwd.png')} mode="widthFix"></Image>
          <View className='h3'>账号安全</View>
          <View className="at-icon at-icon-chevron-right"></View>
        </View>
      </View>
      <View className="mine-button" onClick={()=>{handleGetOut()}}>退出登录</View>
    </View>
  )
}